<template>
  <view class="body">
    <view class="dates">
      <view
        v-for="(item, index) of state.weekList"
        @tap="selectDate(index, item)"
        :key="index"
        :class="['data-item', state.activeDate == index ? 'on' : '']"
      >
        <view>{{ index == 1 ? '今日' : transformChinese(Number(item.day)) }}</view>
        <view class="date-num">{{ item.date }}</view>
        <view v-if="state.activeDate == index" class="arrow-down" />
      </view>
    </view>
    <view class="nodate" v-if="sportsList.length == 0">
      <img class="img" src="https://ainengli.hzjrsw.com/jkhx/noData.png" alt="" />
      <view class="nodate_text">
        <text class="name">今天没有运动任务，好好休息吧！</text>
      </view>
    </view>

    <view class="recommend" v-else>
      <view class="sport-title-box">
        <image
          class="image-bg"
          src="https://ainengli.hzjrsw.com/jkhx/common/sport-title-bg.png"
          alt=""
        />
        <view class="sport-title">
          <image
            class="sport-title-icon"
            src="https://ainengli.hzjrsw.com/jkhx/common/sport-title-icon.png"
            alt=""
          />
          <text class="sport-title-text">{{
            `今日${matchSportTypeName(sportsList[0].sportType)}运动推荐`
          }}</text>
        </view>
      </view>
      <view
        class="sport-content-box"
        @tap="startSports"
        v-for="(item, index) in sportsList"
        :key="index"
      >
        <image
          class="image-bg"
          src="https://ainengli.hzjrsw.com/jkhx/common/sport-content-bg.png"
          alt=""
        />
        <image
          v-if="item.hasFinish"
          class="sports-completed"
          src="https://ainengli.hzjrsw.com/jkhx/common/sports-completed.png"
        />
        <view class="sport-content-main">
          <view class="sport-icon">
            <text :class="['iconfont', 'icons', matchSportIcon(item)]" />
          </view>
          <view>
            <view class="sports-text">{{
              item.sportType == '2' ? '抗阻运动组合' : item.sportName
            }}</view>
            <view class="sports-time">{{ getRemark(item) }}</view>
          </view>
        </view>
      </view>

      <view
        class="sports-start-btn"
        v-if="todayDate === state.weekList[state.activeDate].fDate && !sportsList[0].hasFinish"
        @tap="startSports"
      >
        开始运动
      </view>
      <view class="sports-start-btn" @tap="toSportInfo" v-if="sportsList[0].hasFinish">
        已同步运动记录，去查看→
      </view>
    </view>

    <view class="fixed">
      <button class="fix-btn" @tap="recordSports">记录今日运动</button>
      <view class="result" @tap="sportResult">
        <text>运动评估结果</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { transformChinese } from '@/utils/util'
import { throttle, deepCopy, parseTime } from '@/utils/tools'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getSportsPlan } from './sportsPlan.api'

const state = reactive({
  userInfo: {},
  weekList: [],
  powerInfo: {},
  activeDate: 1,
  haveData: false
})

const sportsDate = ref<string>()
const sportsList = ref<any>([])
const todayDate: any = parseTime(new Date(), '{y}-{m}-{d}')

onShow(async () => {
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  await getTime()

  getData()
})

const getTime = () => {
  state.weekList = []
  const today = new Date()
  const oneday = 86400000
  for (var i = 0; i < 7; i++) {
    if (i == 0) {
      const dayInfo = {
        date: new Date(today.getTime() - oneday).getDate(),
        day: new Date(today.getTime() - oneday).getDay(),
        fDate: parseTime(new Date(today.getTime() - oneday), '{y}-{m}-{d}')
      }
      state.weekList.push(dayInfo)
    } else if (i == 1) {
      const dayInfo = {
        date: today.getDate(),
        day: today.getDay(),
        fDate: parseTime(new Date(), '{y}-{m}-{d}')
      }
      state.weekList.push(dayInfo)
    } else {
      const dayInfo = {
        date: new Date(today.getTime() + (i - 1) * oneday).getDate(),
        day: new Date(today.getTime() + (i - 1) * oneday).getDay(),
        fDate: parseTime(new Date(today.getTime() + (i - 1) * oneday), '{y}-{m}-{d}')
      }
      state.weekList.push(dayInfo)
    }
  }

  sportsDate.value = state.weekList[state.activeDate].fDate
}

const getData = () => {
  sportsList.value = []
  getSportsPlan({
    empi: state.userInfo.empi,
    date: sportsDate.value
  }).then((res: any) => {
    sportsList.value = res.data
  })
}

const selectDate = (index: number, data: any) => {
  state.activeDate = index
  sportsDate.value = data.fDate

  getData()
}

const recordSports = () => {
  uni.navigateTo({
    url: '/module/src/pages/sports/sportsInfo/index'
  })
}

const sportResult = () => {
  uni.navigateTo({
    url: `/module/src/pages/sports/sportsQuestionnaire/questionnaireResult?id=${state.userInfo.sportQuestionnaireRecordId}`
  })
}

const startSports = () => {
  const taskId = sportsList.value[0].patTaskId
  const sportType = sportsList.value[0].sportType
  const hasFinish = sportsList.value[0].hasFinish
  const sportId = sportsList.value[0].sportId
  const planId = sportsList.value[0].planId
  if (sportsList.value[0].sportName === '健步走' || sportsList.value[0].sportName === '广场舞') {
    uni.navigateTo({
      url: `/module/src/pages/sports/sportsPlan/aerobicSports?date=${sportsDate.value}&taskId=${taskId}&sportType=${sportType}&hasFinish=${hasFinish}&sportId=${sportId}&planId=${planId}`
    })
  } else {
    uni.navigateTo({
      url: `/module/src/pages/sports/sportsPlan/warmUp?date=${sportsDate.value}&taskId=${taskId}&sportType=${sportType}&hasFinish=${hasFinish}&sportId=${sportId}&planId=${planId}`
    })
  }
}

const toSportInfo = () => {
  uni.navigateTo({
    url: `/module/src/pages/sports/sportsInfo/index`
  })
}

const getRemark = (data: any) => {
  if (data.sportType == '2') {
    return `${data.groupNum || '--'}组${data.actionNum || '--'}个动作 每组${data.total || '--'}次`
  } else {
    return `运动${data.total || '--'}分钟`
  }
}

const matchSportTypeName = (type: string) => {
  switch (type) {
    case '1':
      return '有氧运动'
    case '2':
      return '抗阻运动'
    case '3':
      return '热身'
    case '4':
      return '拉伸'
    default:
      return ''
  }
}

const matchSportIcon = (data: any) => {
  if (data.sportType == '2') {
    return 'icon-kangzu'
  }
  switch (data.sportName) {
    case '跑步':
      return 'icon-paobu'
    case '游泳':
      return 'icon-youyong'
    case '瑜伽':
      return 'icon-yujia'
    case '椭圆机':
      return 'icon-tuoyuanji'
    case '骑行':
      return 'icon-qihang'
    case '健步走':
      return 'icon-jianbuzou'
    case '篮球':
      return 'icon-lanqiu'
    case '足球':
      return 'icon-zuqiu'
    case '羽毛球':
      return 'icon-yumaoqiu'
    case '乒乓球':
      return 'icon-pingpangqiu'
    case '排球':
      return 'icon-paiqiu'
    case '户外跑':
      return 'icon-huwaipao'
    case '八段锦':
      return 'icon-baduanjin'
    case '太极拳':
      return 'icon-taijiquan'
    case '跳绳':
      return 'icon-tiaosheng'
    case '跑步机':
      return 'icon-paobuji'
    case '功率自行车':
      return 'icon-gongshuaizihangche'
    case '划船机':
      return 'icon-huachuanji'
    case '登山':
      return 'icon-dengshan'
    case '抗阻':
      return 'icon-kangzu'
    case '网球':
      return 'icon-wangqiu'
    case '跳广场舞':
      return 'icon-tiaoguangchangwu'
    case '运动':
      return 'icon-yundong'
    default:
      return ''
  }
}
</script>

<style lang="scss" scoped>
.body {
  position: relative;
  height: 100%;
  padding: 34rpx 32rpx;
  padding-bottom: calc(144rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
  overflow: auto;

  .dates {
    box-sizing: border-box;
    width: 100%;
    padding-bottom: 40rpx;
    overflow-x: scroll;
    white-space: nowrap;

    .data-item {
      position: relative;
      display: inline-block;
      width: 112rpx;
      height: 102rpx;
      padding-top: 12rpx;
      margin-right: 16rpx;
      font-size: 28rpx;
      font-weight: 700;
      color: #222;
      text-align: center;
      background: #fff;
      border-radius: 12rpx;

      .date-num {
        margin-top: 12rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #666;
      }
    }

    .on {
      color: #fff;
      background: #00d1b6;

      .date-num {
        color: #fff;
      }

      .arrow-down {
        position: absolute;
        bottom: -12rpx;
        left: calc(50% - 12rpx);
        width: 0;
        height: 0;
        border-top: 12rpx solid #00d1b6;
        border-right: 12rpx solid transparent;
        border-left: 12rpx solid transparent;
      }
    }
  }

  .nodate {
    text-align: center;

    .img {
      display: inline-block;
      width: 320rpx;
      height: 240rpx;
      margin-top: 240rpx;
    }

    .nodate_text {
      .name {
        display: block;
        margin-top: 10rpx;
        font-size: 28rpx;
        color: #666;
        text-align: center;
      }
    }
  }

  .recommend {
    position: relative;

    .sport-title-box {
      position: relative;
      width: 100%;
      height: 110rpx;
      padding: 26rpx 0 36rpx 32rpx;
    }

    .sport-title {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
    }

    .sport-title-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 8rpx;
    }

    .sport-title-text {
      font-size: 34rpx;
      font-weight: 600;
      color: #defcff;
    }

    .sport-content-box {
      position: relative;
      top: -15rpx;
      width: 100%;
      height: 161rpx;
      padding: 34rpx 32rpx 0;
    }

    .sport-content-main {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: row;
    }

    .sport-icon {
      width: 96rpx;
      height: 96rpx;
      margin-right: 24rpx;
      line-height: 96rpx;
      text-align: center;
      vertical-align: middle;
      border-radius: 8rpx;

      .icons {
        font-size: 96rpx;
        color: #00d1b6;
        background-color: #f2fdfb;
      }
    }

    .sports-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #222;
    }

    .sports-time {
      margin-top: 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #666;
    }

    .sports-time-text {
      font-weight: 600;
      color: #222;
    }

    .sports-start-btn {
      margin-top: 19rpx;
      width: 100%;
      height: 88rpx;
      background: linear-gradient(96deg, #247686 0%, #1a484c 63%, #0d4c5c 100%), #00d1b6;
      border-radius: 44rpx;
      font-weight: 600;
      font-size: 32rpx;
      color: #ffffff;
      text-align: center;
      line-height: 88rpx;
    }
  }

  .image-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
  }

  .sports-completed {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 20;
    width: 82rpx;
    height: 82rpx;
  }

  .fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    // gap: 24rpx;
    justify-content: space-between;
    width: 100%;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    background: #fff;

    .fix-btn {
      width: 100%;
      font-size: 32rpx;
      font-weight: 700;
      color: #fff;
      background: #00d1b6;
      border-radius: 44rpx;
    }

    .result {
      margin-top: 16rpx;
      font-size: 30rpx;
      color: #00d1b6;
      text-align: center;
    }
  }
}

.iconfont {
  width: 96rpx;
  height: 96rpx;
}
</style>
